vue2.0学习笔记（六）：深刻理解Vue中的组件（1）--基础篇

深刻理解Vue中的组件（1）--基础篇github链接 （demo04持续更新中）

什么是组件？
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
在vue-cli中简单的理解。vue组件就是一个 .vue 文件，里面包含<template> <script><style>。
如下就是一个简单的组件，我们又称之为单文件组件。

<template>
    <div class="hello">
        <h2>{{msg}}</h2>
    </div>
</template>
<script>
    export default {
        name: "Demo04",
        data() {
            return {
                msg: "demo04 -- 深刻理解Vue中的组件"
            };
        },
        created() {
            console.log("实例创建完成");
        },
        mounted: function() {
            this.$nextTick(function() {
    
            });
        },
        methods: {
            _handleClick() {
                
            }
        }
    };
</script>
<style scoped lang="less">
    .hello {
        height: 200px;
        h2 {
            background: #dcdc3e;
        }
    }
</style>

使用组件

1. 全局组册

   如我们在文件夹中编写一个Header.vue组件，并在main.js中引入，注册为全局组件  
   
      //在main,js中引入组件Header,并组册为全局组件
      import Header from './assets/header/header.vue';
      Vue.component('Header',Header)
      ---------------------------------------
      在damo04.vue渲染Header组件
      <template>
          <div class="hello">
              <Header/>
              <h2>{{msg}}</h2>
          </div>
      </template>
   
   
   

2. 局部组册

   你不必把每个组件都注册到全局。
   你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件：
   如app.vue组件，局部组册了很多组件

      <template>
        <div id="app">
          <!--第三步 在template 中渲染组件-->
          <!-- <Demo01/>
          <hr>
          <Demo02/>
          <hr>
          <Demo03/>
          <hr> -->
          <Demo04/>
        </div>
      </template>
      
      <script>
      //第一步 引入Demo01 组件
      import Demo01 from './components/demo01/demo01'
      import Demo02 from './components/demo02/demo02'
      import Demo03 from './components/demo03/demo03'
      import Demo04 from './components/demo04/demo04'
      export default {
        name: 'App',
        //第二步 在components 中注册组件
        components: {
          Demo01,
          Demo02,
          Demo03,
          Demo04,
        }
      }
      </script>
      
      <style>
      
      </style>
   

组件组合

组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

父组件demo04源码

<template>
    <div class="hello">
        <Header/>
        <h2>{{msg}}</h2>
        <!--父组件通过message向子组件传递数据-->
        <!--子组件数据通过sendCount传递过来，父组件通过_handleCount()方法接受-->
        <submit-com message="hello!" @sendCount="_handleCount"></submit-com>
    </div>
</template>

<script>
import submitCom from './children/submit'

    export default {
        name: "Demo01",
        data() {
            return {
                msg: "demo04 -- 深刻理解Vue中的组件",
                topic:"hello"
            };
        },
        created() {
            console.log("实例创建完成");
        },
        mounted: function() {
            this.$nextTick(function() {
    
            });
        },
        components: {
            submitCom
        },
        methods: {
            _handleClick() {
                console.log(111);
            },
            //接受子组件传递的数据，并打印
            _handleCount(data){
                console.log(data);
            }
        }
    };
</script>

<style scoped lang="less">
    .hello {
        height: 200px;
        h2 {
            background: #dcdc3e;
        }
    }
</style>

子组件submit源码

<template>
    <div class="hello">
        {{msg}}
       
        {{message}}
        {{count}}
         <el-button round @click="_handleClick()">圆角按钮</el-button>
    </div>
</template>

<script>
    export default {
        name: "Demo01",
        data() {
            return {
                msg: "submit组件",
                count:0
            };
        },
        // 通过props从父组件中接受数据，变成组件内部数据
        props:["message"],
        created() {
        },
        mounted: function() {
            this.$nextTick(function() {
    
            });
        },
        comments: {
        },
        methods: {
            _handleClick() {
                this.count++;
                //向父组件传递数据 count
                this.$emit('sendCount', this.count)
            }
        }
    };
</script>

<style scoped lang="less">
    .hello {
        height: 200px;
        h2 {
            background: #dcdc3e;
        }
    }
</style>